import { useState, useEffect } from 'react'
import { useNavigate, Outlet, useLocation } from 'react-router-dom'
import '../App.css'
import { ConfigProvider, Menu, Radio, RadioChangeEvent } from 'antd'
import { MenuOutlined, ProfileOutlined, ProjectOutlined, VideoCameraOutlined } from '@ant-design/icons'
import type { Locale } from 'antd/es/locale';
import en from 'antd/locale/en_US';
import zh from 'antd/locale/zh_CN';
import { configContext, cn } from '../config/env'

const defaultMenu = [{
   key: '0',
   icon: <ProfileOutlined />,
   label: '内容管理',
   enlabel: 'content management',
   cnlabel: '内容管理',
   children: [{
     key: 'node',
     label: '直播节点',
     enlabel: 'live node',
     cnlabel: '直播节点'
   },
   {
     key: 'channel',
     label: '直播频道',
     enlabel: 'live channel',
     cnlabel: '直播频道'
   },
   {
     key: 'createChannel',
     label: '注入直播频道',
     enlabel: 'inject live channel',
     cnlabel: '注入直播频道'
   },
   {
     key: 'removeChannel',
     label: '撤销直播频道',
     enlabel: 'cancel live channel',
     cnlabel: '撤销直播频道'
   },
   {
     key: 'onChannel',
     label: '上线直播频道',
     enlabel: 'launch live channel',
     cnlabel: '上线直播频道'
   },
   {
     key: 'offChannel',
     label: '下线直播频道',
     enlabel: 'offline live channel',
     cnlabel: '下线直播频道'
   }]
},
{
  key: '1',
  icon: <MenuOutlined />,
  label: '配置管理',
  enlabel: 'configuration management',
  cnlabel: '配置管理',
  children: [{
    key: 'config',
    label: '服务配置',
    enlabel: 'service configuration',
    cnlabel: '服务配置'
  }]
},
{
  key:'2',
  icon: <ProfileOutlined />,
  label: '业务系统',
  enlabel: 'Business system',
  cnlabel: '业务系统',
  children: [{
    key: 'client',
    label: '业务系统配置',
    enlabel: 'Business system configuration',
    cnlabel: '业务系统配置'
  }]
},
{
  key: '3',
  icon: <VideoCameraOutlined />,
  label: '直播管理',
  enlabel: 'Live broadcast management',
  cnlabel: '直播管理',
  children: [{
    key: 'broadcastCategory',
    label: '直播分类',
    enlabel: 'Live stream classification',
    cnlabel: '直播分类'
  },
  {
    key: 'broadcastChannel',
    label: '直播频道',
    enlabel: 'Live channel',
    cnlabel: '直播频道'
  }]
},
{
  key: '4',
  icon: <ProjectOutlined />,
  label: '点播管理',
  enlabel: 'point node management',
  cnlabel: '点播管理',
  children: [{
    key: 'nodeManage',
    label: '点播节点',
    enlabel: 'point node',
    cnlabel: '点播节点'
  }]
}]

function Layout() {
   const location = useLocation()
   const path = location.pathname.replace('/', '')
   const navigate = useNavigate()
   const [activeMenu, setActiveMenu] = useState(path || 'node')
   const [locale, setLocal] = useState<Locale>(zh)
   const [configValue, setConfigValue] = useState(cn);
   const [menu, setMenu] = useState(defaultMenu);

   useEffect(() => {
     updateUrl({key: activeMenu})
   }, [])
   
   const updateUrl = (value: any) => {
     const { key } = value
     setActiveMenu(key)
     navigate('/' + key)
   }

   const changeLocale = (e: RadioChangeEvent) => {
     const localeValue = e.target.value
     setLocal(localeValue)
     setConfigValue(localeValue.locale)
     const newMenu = menu.map(item => {
        item.label = localeValue.locale == cn ? item.cnlabel : item.enlabel
        if (item.children) {
          item.children.forEach(context => {
            context.label = localeValue.locale == cn ? context.cnlabel : context.enlabel
          })
        }
        return {
          ...item
        }
     })
     setMenu(newMenu)
   }

   return ( 
      <div className='container'>
        <div className='header' style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
          <div>{configValue == cn ? '管理后台'  : 'management background'}</div>
          <Radio.Group size='small' value={locale} onChange={changeLocale}>
            <Radio.Button key="cn" value={zh}>
              中文
            </Radio.Button>
            <Radio.Button key="en" value={en}>
              en
            </Radio.Button>
          </Radio.Group>
        </div>
        <div className='app'>
          <Menu
            onClick={updateUrl}
            mode='inline'
            className='menu'
            items={menu}
            defaultOpenKeys={[activeMenu == 'config' ? '1' : '0']}
            defaultSelectedKeys={[activeMenu]}
            selectedKeys={[activeMenu]}
           />
          <div className='content'>
            <configContext.Provider value={configValue}>
              <ConfigProvider locale={locale}>
                  <Outlet />
              </ConfigProvider>
            </configContext.Provider>
          </div>
        </div>
      </div>
   );
}

export default Layout